<!DOCTYPE html>
<html>
<head>
	<title>nth-graph jQuery plugin test</title>
	<script type="text/javascript" src="../lib/jquery.js"></script>
	<script type="text/javascript" src="../lib/jquery.nth-graph.js"></script>
	<script type="text/javascript" src="../lib/jquery.metadata.js"></script>
	<script type="text/javascript">
	// <![CDATA[	
	$(document).ready(function() {
		$(document).nthGraph(
				{ "cg":{"graph":{"version":"0.03"}  
				, "nodes":[
							  {"name":"start"}
							, {"ele":"#cb1", "type":"in", "subtype":"checkbox", "input":{"event":{"change":"traverse"}}}
							, {"ele":"#text1", "type":"in", "input":{"event":{"change":"traverse"}}}
							, {"name":"log", "data":{"nthlog":""}
								, "process":"function() {"+
														"  this.nthlog += 'cb1 is '+this.cb1+ ' and text1 is '+this.text1;"+
														"}"
							}
							, {"ele":"#cb2", "type":"in", "subtype":"checkbox", "input":{"event":{"change":"traverse"}}}
							, {"ele":"#nthlog", "type":"io", "output":{"event":{"change":"immediately"}, "type":"text"}}
							, {"name":"stop"
								, "process":"function() {"+
														"  var s = (this.cb2)?'Sanity clause ':'\"your\\'re not going to like this.\"';"+
														"  this.nthlog += s;"+
														"  this.text2 = s;"+
														"}"
							}
							, {"ele":"#text2", "type":"io", "input":{"event":{"change":"traverse"}}, "output":{"event":{"change":"immediately"}, "type":"value"}}
							, {"ele":"#p1", "type":"out", "output":{"event":{"change":"immediately"}, "type":"text"}}
							, {"ele":"#p2", "type":"out", "output":{"event":{"change":"immediately"}, "type":"text"}}
				  ]
				, "edges":[
							  {"from":0, "to":3, "type":"trans"}
							, {"from":3, "to":1, "type":"get", "name":"cb1"}
							, {"from":3, "to":2, "type":"get", "name":"text1"}
							, {"from":3, "to":6, "type":"trans"}
							, {"from":6, "to":4, "type":"get", "name":"cb2"}
							, {"from":6, "to":5, "type":"get", "name":"nthlog"}
							, {"from":6, "to":2, "type":"get", "name":"text1"}
							, {"from":6, "to":5, "type":"set", "name":"nthlog"}
							, {"from":6, "to":7, "type":"set", "name":"text2"}
							, {"from":6, "to":8, "type":"set", "name":"text1"}
							, {"from":6, "to":9, "type":"set", "name":"text2"}
				  ]
			}, 
			"cgref": "../../additional/example_graphs/ins_and_outs.cg.json",
			"debug":function(msg){/*alert(msg);*/},
			"warn":function(msg){alert(msg);}
		});
	});
	
	
	// ]]>
	</script>
</head>
<body>
<p id="p2" nth-graph-input='{"msg":"The party in the first part. "}'>The party in the first part shall be called "the party in the first part." </p>
<p id="p1" >The party in the second part shall be called "the party in the second part." </p>
<div style="background:#ccd"> <h2>nth-graph log</h2> <div id="nthlog"> </div>
</div>
<input type="text" id="text1" value="Your should have been at the first party!" />
<input type="text" id="text2" />
<input type="checkbox" id="cb1" />
<input type="checkbox" id="cb2" />

</body>
</html>